<template>
  <n-card
          style="border-radius: 5px;cursor: pointer;box-sizing: border-box"
          :segmented="{ content: 'hard', footer: 'hard' }"
          size="small"
          hoverable
          :bordered="false">
    <template #header>
      <slot name="header">
        <div class="os-bar flex">
          <div class="bar-item flex-center" @click="handleClose"> <Close/> </div>
          <div class="bar-item flex-center" @click="handleRefresh"> <SyncOutline/></div>
        </div>
      </slot>
    </template>
    <template #header-extra>
      <slot name="header-extra"></slot>
    </template>
    <template #default>
      <slot name="default"></slot>
    </template>
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </n-card>
</template>

<script lang="ts" setup>
  import { Close ,SyncOutline} from '@vicons/ionicons5'
  const props = defineProps(['title']);
  const emmit = defineEmits(['refresh'])
  import { useMessage } from "naive-ui";
  import { getCurrentInstance } from "vue";
  const message = useMessage();
  const instance = getCurrentInstance();
  function handleClose(){
    message.info('点击了关闭')
  }

  function handleRefresh(){
    emmit('refresh',instance?.attrs.itemid);
    message.success('刷新成功')
  }

</script>

<style lang="scss" scoped>
.os-bar{
    .bar-item{
       width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: #d0cfd2;
      margin-right: 5px;
      color: #fff;
    }
  .bar-item:first-child{
    background-color: #fb635b;
  }
  .bar-item:nth-child(2){
    background-color: #18a058;
  }
}
</style>
